<template>
  <div class="shelf">
    <ShelfUserInfo
      :userInfo="user"
      :readDay="readDay"
      :num="shelfList.length"
    />

    <ShelfList
      :shelfList="shelfList"
    />
  </div>
</template>

<script>
  import ShelfUserInfo from '../../components/shelf/ShelfUserInfo.vue';
  import ShelfList from '../../components/shelf/ShelfList.vue';
  import {getUserDay,getShelfList} from '../../api';
  export default {
    name: "shelf",
    components : {
      ShelfUserInfo,
      ShelfList,
    },
    data(){
      return {
        userInfo : {},
        readDay : 0,
        shelfList : [],
      }
    },
    computed : {
      user(){
        const { avatarUrl,nickName } = this.$route.query;
        this.userInfo.avatarUrl = avatarUrl || '';
        this.userInfo.nickName = nickName || '';
        return this.userInfo;
      },
    },
    onShow(){
      this.getUserDay();
      this.getShelfList();
    },
    methods : {
      getUserDay(){
        let openId = mpvue.getStorageSync('openId');
        getUserDay({openId}).then(response=>{
          this.readDay = response.data.data.day;
        });
      },
      getShelfList() {
        let openId = mpvue.getStorageSync('openId');
        getShelfList({
          openId,
        }).then(response=>{
          this.shelfList = response.data.data;
        });
      }
    },
  };
</script>

<style lang="less" scoped>
.shelf{
  padding: 26px;
  box-sizing: border-box;
}
</style>
